<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolBar" style="float:left;padding-top: 10px;padding-left: 50px;">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-form-item prop="name">
          <el-input v-model="filters.name" placeholder="名称" style="width: 10em"></el-input>
        </el-form-item>
        <el-form-item prop="sku">
          <el-input v-model="filters.sku" placeholder="SKU" style="width: 10em"></el-input>
        </el-form-item>
        <el-form-item prop="asin">
          <el-input v-model="filters.asin" placeholder="平台ASIN" style="width: 10em"></el-input>
        </el-form-item>
        <el-form-item prop="shop">
          <el-select v-model="filters.shop" :clearable="true" placeholder="店铺" style="width: 10em">
            <el-option v-for="item in shops"
                       :key="item"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="goodsType">
          <el-select v-model="filters.goodsType" clearable filterable placeholder="品类" style="width: 11em">
            <el-option v-for="item in goodsTypes"
                       :key="item.label"
                       :label="item.value"
                       :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <kt-button type="primary"
                     icon="fa fa-search"
                     :label="$t('action.search')"
                     perms="sale:goods:view"
                     @click="findPage"/>
        </el-form-item>
        <el-form-item>
          <kt-button type="primary"
                     icon="fa fa-refresh"
                     :label="$t('action.reset')"
                     perms="sale:goods:view"
                     @click="reset"/>
        </el-form-item>
        <el-form-item>
          <kt-button type="primary"
                     icon="fa fa-plus"
                     :label="$t('action.add')"
                     perms="sale:goods:add"
                     @click="showAdd"/>
        </el-form-item>
        <el-form-item>
          <kt-button type="primary"
                     icon="fa fa-filter"
                     label="列显示"
                     perms="sale:order:view"
                     @click="displayFilterColumnDialog"/>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                  @handleFilterColumns="handleFilterColumns">
      </table-column-filter-dialog>
    </div>

    <!--表格内容栏-->
    <kt-table perms-edit="sale:goods:edit" perms-delete="sale:goods:delete"
              :data="pageResult" :columns="filterColumns" @findPage="findPage" @handleEdit="showEdit">
    </kt-table>

    <!--新增编辑界面-->
    <el-dialog :title="operation?'新增':'编辑'" width="30%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="dataForm"
               label-width="100px"
               :rules="dataFormRules"
               ref="dataForm"
               :size="size"
               label-position="right">
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="dataForm.name" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="所属店铺" prop="shop">
          <el-select v-model="dataForm.shop" :clearable="true" placeholder="请选择店铺" style="width: 100%">
            <el-option v-for="item in shops"
                       :key="item"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属品类" prop="goodsType">
          <el-select v-model="dataForm.goodsType" :clearable="true" placeholder="请指定品类" style="width: 100%">
            <el-option v-for="item in goodsTypes"
                       :key="item.label"
                       :label="item.value"
                       :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="SKU" prop="sku">
          <el-input v-model="dataForm.sku" :disabled="!operation"></el-input>
        </el-form-item>
        <!-- <el-form-item label="FN-SKU" prop="fnSku">
           <el-input v-model="dataForm.fnSku"></el-input>
         </el-form-item>-->
        <el-form-item label="ASIN" prop="asin">
          <el-input v-model="dataForm.asin"></el-input>
        </el-form-item>
        <el-form-item label="产品编码" prop="productCode">
          <el-select v-model="dataForm.productCode" clearable filterable placeholder="请关联产品" style="width: 100%">
            <el-option v-for="item in products" :key="item.innerCode" :label="item.name" :value="item.innerCode">
              <span style="float:left">{{ item.name }}</span>
              <span style="float:right;color: crimson;font-size: 13px">{{ item.innerCode }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="SKU链接" prop="showUrl">
          <el-input v-model="dataForm.showUrl"></el-input>
        </el-form-item>
        <el-form-item label="头程成本(￥)" prop="headwayFee">
          <el-input-number v-model="dataForm.headwayFee" size="large" :precision="2" :min='0.00' :step='0.50'>
          </el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" autosize :show-word-limit="true" v-model="dataForm.remark"
                    maxlength="100"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button :size="size" @click.native="dialogVisible=false">{{ $t('action.cancel') }}</el-button>
        <el-button :size="size" type="primary" :loading="editLoading" @click.native="submitForm">
          {{ $t('action.submit') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KtTable from '../core/KtTable'
import KtButton from '../core/KtButton'
import {format} from "../../utils/datetime";
import TableColumnFilterDialog from '../core/TableColumnFilterDialog'

export default {
  name: "Goods",
  components: {
    KtTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: 'small',
      filters: {
        name: '',
        sku: '',
        asin: '',
        shop: '',
        goodsType: ''
      },
      columns: [],//初始表格列显示字段
      filterColumns: [],//列显示过滤字段
      pageRequest: {},
      pageResult: {},
      operation: false,//true新增 false编辑
      dialogVisible: false,//新增编辑界面是否显示
      editLoading: false,
      products: [],
      shops: [],
      goodsTypes: [
        {label: 'normal', value: '常规品类'}
      ],
      //新增或编辑页面
      dataForm: {
        id: 0,
        name: '',
        sku: '',
        fnSku: '',
        asin: '',
        shop: '',
        goodsType: '',
        productCode: '',
        showUrl: '',
        remark: ''
      },
      dataFormRules: {
        name: [
          {required: true, message: '请定义名称', trigger: 'blur'}
        ],
        shop: [
          {required: true, message: '请选择店铺', trigger: 'blur'}
        ],
        sku: [
          {required: true, message: '请输入SKU', trigger: 'blur'}
        ],
        /*  fnSku: [
            {required: true, message: '请输入平台FnSKU', trigger: 'blur'}
          ],*/
        asin: [
          {required: true, message: '请输入平台ASIN', trigger: 'blur'}
        ],
        productCode: [
          {required: true, message: '请关联产品', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 处理表格列过滤显示
    initColumns() {
      this.columns = [
        // {prop: "id", label: "ID", minWidth: 70},
        {prop: "shop", label: "所属店铺", minWidth: 100},
        {prop: "name", label: "名称", minWidth: 140},
        {prop: "sku", label: "SKU", minWidth: 100},
        //{prop: "fnSku", label: "fn-sku", minWidth: 100},
        {prop: "asin", label: "ASIN", minWidth: 100},
        {prop: "goodsTypeDesc", label: "品类", minWidth: 100},
        {prop: "productCode", label: "产品编码", minWidth: 100},
        {prop: "headwayFee", label: "头程成本(￥)", sortable: true, minWidth: 120, formatter: true},
        {prop: "showUrl", label: "SKU链接", minWidth: 100, showOverflow: true, hrefUrl: true},
        {prop: "remark", label: "描述", minWidth: 100, showOverflow: true},
      ];
      this.filterColumns = JSON.parse(JSON.stringify(this.columns));
    },
    //时间格式化
    dateFormat(row, column, cellVal, index) {
      return format(row[column.property])
    },
    //处理表格列过滤显示
    displayFilterColumnDialog() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    //获取分页数据
    findPage(data) {
      if ((data !== null && typeof data !== 'undefined') && typeof data.pageRequest !== 'undefined') {
        this.pageRequest = data.pageRequest;
      }
      this.pageRequest.params = {
        sku: this.filters.sku,
        name: this.filters.name,
        asin: this.filters.asin,
        goodsType: this.filters.goodsType,
        shop: this.filters.shop
      };
      this.$api.goods.findPage(this.pageRequest).then(
        (res) => {
          if (res.code === 200) {
            this.pageResult = res.data;
            this.convertType(this.pageResult);
          }
        }
      ).then((data !== null && typeof data !== 'undefined') ? data.callback : '');
    },
    convertType(pageResult) {
      let goodsList = pageResult.content;
      goodsList.forEach(
        o => {
          this.goodsTypes.forEach(
            t => {
              if (o.goodsType === t.label) {
                o.goodsTypeDesc = t.value;
              }
              if (o.goodsTypeDesc === '') {
                o.goodsTypeDesc = o.goodsType;
              }
            }
          )
        }
      )
    },
    //显示新增界面
    showAdd() {
      this.dialogVisible = true;
      this.operation = true;
      this.dataForm = {
        id: 0,
        name: '',
        nameEn: '',
        sku: '',
        fnSku: '',
        shop: '',
        goodsType: '',
        purchaseCost: 0.00,
        sellingPrice: 0.00,
        fbaFee: 0.00,
        headwayFee: 0.00,
        packFee: 0.00,
        remark: ''
      }
    },
    //显示编辑界面
    showEdit(params) {
      this.dialogVisible = true;
      this.operation = false;
      this.dataForm = Object.assign({}, params.row);
    },
    //提交表单
    submitForm() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗?', '提示', {}).then(() => {
            this.editLoading = true;
            this.$api.goods.save(this.dataForm).then((res) => {
              this.editLoading = false;
              if (res.code === 200) {
                this.$message({message: '操作成功', type: 'success'});
                this.dialogVisible = false;
                this.$refs['dataForm'].resetFields();
              } else {
                this.$message({message: res.message, type: 'error'});
              }
              this.findPage()
            });
          })
        }
      })
    },
    //获取店铺信息
    findShops() {
      this.shops = localStorage.getItem('authorizedShops').split(',');
    },
    //获取所有产品信息
    findProducts() {
      this.$api.product.findAll().then((res) => {
        this.products = res.data;
      })
    },
    findGoodsType() {
      this.$api.dict.findByType({type: 'goods_type'}).then((res) => {
        if (res.code === 200) {
          this.goodsTypes = res.data;
        }
      })
    },
    reset() {
      this.$refs['filters'].resetFields();
      this.findPage();
    }
  },
  mounted() {
    this.findShops();
    this.findGoodsType();
    this.findProducts();
    this.initColumns();
  }
}
</script>

<style scoped>

</style>
